<template>
  <div class="wrapper">
    <my-map
      :bases="bases"
      @route-to="routeTo"
    />
    <login-form
      :login-form-visible="loginFormVisible"
      @close="loginFormVisible = false"
      @refresh="refresh"
    />
    <list
      :bases="bases"
      @login="loginFormVisible = true"
      @search="search"
      @route-to="routeTo"
    />
    <div class="copyright">版权所有 &copy; 安徽农业大学 <a class="icp" target="_blank" href="http://www.beianbeian.com/beianxinxi/18ab29582b107de611ac42b5b376d513.html">皖ICP备18007645号-1</a> 地址：安徽省合肥长江西路130号 邮编：230036 意见反馈请联系：raoyuan@ahau.edu.cn</div>
  </div>
</template>

<script>
import MyMap from './components/MyMap'
import LoginForm from './components/LoginForm'
import List from './components/List'
import { searchBase } from '@/api/base'
// import { login, logout, getInfo } from '@/api/user'

export default {
  name: 'Login',
  components: {
    MyMap,
    LoginForm,
    List
  },
  data() {
    const IMAGE_FILE_NAME = 'siteImage'
    return {
      bases: [],
      loginFormVisible: false,
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME
    }
  },
  created() {
    this.searchBase('')
  },
  methods: {
    searchBase(keys) {
      searchBase({ keys })
        .then(response => {
          const bases = response.sites
          bases.map(item => {
            if (item.image === '') {
              item.image = this.imgUrl + '/noImage.png'
            } else {
              item.image = this.imgUrl + '/' + item.image
            }
          })
          this.bases = bases
        })
        .catch(error => {
          console.log(error)
        })
    },
    search(keys) {
      this.searchBase(keys.trim())
    },
    refresh() {
      this.$router.go(0)
    },
    routeTo(siteId, entId) {
      this.$router.push({
        path: '/display',
        query: {
          siteId,
          entId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width:100%;
  height:100vh;
  position:relative;
  display:flex;
  align-items: center;
}

.copyright {
  position:absolute;
  bottom:15px;
  z-index:2;
  left:0;
  right:0;
  margin:0 auto;
  color:#000;
  font-size:13px;
  text-align: center;
  .icp:hover {
    color:#409EFF;
    cursor:pointer;
  }
}
</style>

